<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单</title>
</head>
<body>
<!-- form表示整个表单 action属性用于提交表单收集的数据 #占位符，暂时提交到本页 -->
<!-- input是表单的输入控件
     name：控制控件的名字，没有name的控件无法提交值！
     value：默认存在，用来保护用户在控件中输入的值，也可以设置输入框的默认值与按钮上显示的文字
     readonly：单值属性，只读，无法修改，但是可以提交值
     disable：单值属性，禁用，用户无法修改，也无法提交
     placeholder：提示文本占位符
 -->
<form action="#">
    姓名1:<input type="text" name="uname1"><br>
    姓名2:<input type="text" name="uname2" placeholder="请输入您的姓名"><br>
    姓名3:<input type="text" name="uname3" value="rose"><br>
    姓名4:<input type="text" name="uname4" value="rose" readonly><br>
    姓名5:<input type="text" name="uname5" value="rose" disabled><br>
    密码:<input type="password" name="upwd" maxlength="6" placeholder="请输入你的密码"><br>
    性别：
    <input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="0">女
    <br>
    爱好：
    <input type="checkbox" name="like" value="sj">睡觉
    <input type="checkbox" name="like" value="ct">吃糖
    <input type="checkbox" name="like" value="kxs">看小说
    <input type="checkbox" name="like" value="wyx">玩游戏
    <br>
    <!--  h5新增了一些表单控件  -->
    幸运色：<input type="color" name="lc"><br>
    缩放：<input type="range" name="sf"><br>
    生日：<input type="date" name="birthday"><br>
    文件：<input type="file" name="file"><br>
    <br>
    <!--  关联效果1:点击文字即可选中复选框  -->
    <input type="checkbox" id="ok">
    <label for="ok">我同意以上协议</label>
    <br>
    <!--  关联效果2：点击文字即可让输入框获取输入焦点  -->
    <label for="nickname">昵称</label>
    <input type="text" id="nickname" placeholder="请输入昵称">
    <br>
    <input type="submit" value="点我提交">
    <input type="reset" value="点我重置">
    <input type="button" value="普通按钮">
    <button>h5新按钮</button>
    <!-- type属性控制控件的类型：
    text普通文本输入框 password密码框 radio单选框 checkbox 多选框
    file上传文件 date日期 color颜色 range范围
    submit提交按钮 reset重置按钮（恢复成所有控件的初始化状态） button普通按钮
      -->
    <br>
    喜欢的城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
    </select>
    <br>今日作业
    留言板：
    <textarea name="mgs" style="resize: none;"></textarea>
</form>
</body>
</html>






















